<template>
  <view class="ui-form-basic ui-component-multilevel">
    <fui-form ref="formRef" :model="form" class="form-wrapper" labelWidth="200" labelSize="28" labelWeight="bold">
      <fui-form-item label="运营范围" arrow prop="region" left="0" marginTop="14" :padding="['16rpx', 0]" @click="onShowRegionPicker">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请选择运营范围" v-model="form.region" size="28" disabled></fui-input>
      </fui-form-item>
      <fui-form-item label="运营品类" arrow prop="category" left="0" marginTop="14" :padding="['16rpx', 0]" @click="onShowCategoryPicker">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请选择运营品类" v-model="form.category" size="28" disabled></fui-input>
      </fui-form-item>
    </fui-form>

    <multilevel-picker ref="regionPickerRef" :data="regionData" @submit="submitRegion"></multilevel-picker>
    <multilevel-picker ref="categoryPickerRef" :data="categoryData" @submit="submitCategory"></multilevel-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import regionData from '@/utils/region'
import categoryData from '@/utils/category'
import multilevelPicker from '@/components/multilevel'

const form = reactive({
  region: '',
  category: ''
})

// 选择运营范围
const regionPickerRef = ref(null)
const onShowRegionPicker = () => {
  regionPickerRef.value.show()
}
const submitRegion = (data, label) => {
  form.region = label
}

// 选择运营品类
const categoryPickerRef = ref(null)
const onShowCategoryPicker = () => {
  categoryPickerRef.value.show()
}
const submitCategory = (data, label) => {
  form.category = label
}
</script>

<style lang='scss' scoped>
@import "@/static/scss/form.scss";
</style>